<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'small',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
      </template>
      <!-- 表格展开信息 -->
      <template #expand="props">
        {{ props.props.row }}
      </template>
      <template #buttons>
        <el-button size="small" @click="isShowDialog = !isShowDialog">添加品牌</el-button>
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref, getCurrentInstance } from "vue";

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance()

    const tableAttrs = shallowReactive({
      // Table Attributes
      name: "商品品牌",
      infos: [
        "平台端维护系统的平台，同时商家可以添加自己店铺的品牌。",
        "商家添加商品时可以选择对应的品牌，品牌可以是平台的品牌也可以是商家品牌。",
        "商品类型可以关联平台的品牌用在前台搜索商品。",
      ],
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          type: "selection", //多选框Attribute
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "date",
          label: "日期",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["编辑", "删除"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput", //组件名
        prop: "search", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "搜索框",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入品牌名称",
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "brand_name",
        value: "",
        rule: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        formItemAttrs: {
          label: "品牌名称",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入品牌名称",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "first_word",
        value: "",
        formItemAttrs: {
          label: "品牌首字母",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 3,
        name: "CommonUpload",
        prop: "image",
        value: '',
        formItemAttrs: {
          label: "品牌图标",
        },
      },
      {
        id: 4,
        name: "CommonInputNumber",
        prop: "sort",
        value: 0,
        formItemAttrs: {
          label: "排序",
        },
      },
      {
        id: 5,
        name: "CommonSwitch",
        prop: "is_recommend",
        value: 0,
        formItemAttrs: {
          label: "是否推荐",
        },
        inputAttrs: {
          'active-value': 0,
          "inactive-value": -1,
        }
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = async (param) => {
      console.log("edit", param);
      const data = await proxy.$api.reqGoodsBrandAdd(param)
      console.log(data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
